<template>
	<view class="content">
		<view class="_main">
			<view class="uni__input_box">
				<view class="uni__input_label_text">
					<view class="_required">*</view>职业
				</view>
				<view class="uni__input">
					<form-select ref="formSelect1" :placeholder="occupationPlaceholder" :selectedId="occupationId"
						:localdata="occupationModel" @change="changeOccupation"></form-select>
				</view>
			</view>
			<view class="uni__input_box">
				<view class="uni__input_label_text">
					<view class="_required">*</view>地区
				</view>
				<view class="uni__input_group">
					<view class="uni__input">
						<form-select ref="formSelect2" :placeholder="provincePlaceholder" :selectedId="provinceId"
							:localdata="provinceModel" @change="changeProvince"></form-select>
					</view>
					<view class="uni__input">
						<form-select ref="formSelect3" :placeholder="areaPlaceholder" :selectedId="areaId"
							:localdata="areaModel" @change="changeArea"></form-select>
					</view>
				</view>
			</view>
			<view class="uni__input_box">
				<view class="uni__input_label_text">
					<view class="_required">*</view>组件带图标
				</view>
				<view class="uni__input">
					<form-select ref="formSelect4" :icon="true" :selectedId="iconId" :localdata="iconModel"
						@change="changeIcon"></form-select>
				</view>
			</view>
			<view class="uni__input_box">
				<view class="uni__input_label_text">
					<view class="_required">*</view>禁止选择
				</view>
				<view class="uni__input">
					<form-select ref="formSelect4" :disabled="true" :icon="true" :selectedId="2" :localdata="iconModel"
						@change="changeIcon"></form-select>
				</view>
			</view>

			<view class="uni__input_box">
				<view class="uni__input_label_text">
					<view class="_required">*</view>选项带图标
				</view>
				<view class="uni__input">
					<form-select ref="formSelect4" :icon="true" :selectedId="optionId" :localdata="optionModel"
						@change="changeOption"></form-select>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import formSelect from '@/components/form-select/form-select';
	export default {
		components: {
			formSelect
		},
		data() {
			return {
				title: 'Hello',
				occupationPlaceholder: '请选择职业',
				occupationId: 0,
				occupationModel: [{
						id: '1',
						title: '程序员'
					},
					{
						id: '2',
						title: '医生'
					},
					{
						id: '3',
						title: '律师'
					},
				],
				provincePlaceholder: '请选择省份',
				provinceId: 0,
				provinceModel: [{
						id: '1',
						title: '湖北',
						child: [{
								id: '100',
								title: '武汉'
							},
							{
								id: '101',
								title: '宜昌'
							},
							{
								id: '102',
								title: '恩施'
							},
							{
								id: '103',
								title: '十堰'
							},
						]
					},
					{
						id: '2',
						title: '湖南',
						child: [{
								id: '200',
								title: '长沙'
							},
							{
								id: '201',
								title: '湘潭'
							},
							{
								id: '202',
								title: '岳阳'
							},
							{
								id: '203',
								title: '常德'
							},
						]
					},
					{
						id: '3',
						title: '广东',
						child: [{
								id: '300',
								title: '广州'
							},
							{
								id: '301',
								title: '深圳'
							},
							{
								id: '302',
								title: '佛山'
							},
							{
								id: '303',
								title: '惠州'
							},
						]
					},
					{
						id: '4',
						title: '浙江',
						child: [{
								id: '400',
								title: '杭州'
							},
							{
								id: '401',
								title: '宁波'
							},
							{
								id: '402',
								title: '嘉兴'
							},
							{
								id: '403',
								title: '金华'
							},
						]
					},
					{
						id: '5',
						title: '江苏',
						child: [{
								id: '500',
								title: '无锡'
							},
							{
								id: '501',
								title: '徐州'
							},
							{
								id: '502',
								title: '常州'
							},
							{
								id: '503',
								title: '南通'
							},
						]
					},
					{
						id: '6',
						title: '河北',
						child: [{
								id: '600',
								title: '石家庄'
							},
							{
								id: '601',
								title: '唐山'
							},
							{
								id: '602',
								title: '张家口'
							},
							{
								id: '603',
								title: '保定'
							},
						]
					},
					{
						id: '7',
						title: '山东',
						child: [{
								id: '700',
								title: '济南'
							},
							{
								id: '701',
								title: '淄博'
							},
							{
								id: '702',
								title: '烟台'
							},
							{
								id: '703',
								title: '威海'
							},
						]
					},
					{
						id: '8',
						title: '辽宁',
						child: [{
								id: '800',
								title: '沈阳'
							},
							{
								id: '801',
								title: '大连'
							},
							{
								id: '802',
								title: '鞍山'
							},
							{
								id: '803',
								title: '营口'
							},
						]
					},
					{
						id: '9',
						title: '黑龙江',
						child: [{
								id: '900',
								title: '哈尔滨'
							},
							{
								id: '901',
								title: '齐齐哈尔'
							},
							{
								id: '902',
								title: '佳木斯'
							},
							{
								id: '903',
								title: '牡丹江'
							},
						]
					},
				],
				areaPlaceholder: '请选择城市',
				areaId: 0,
				areaModel: [],
				iconId: 0,
				iconModel: [{
						id: '1',
						title: '选项1'
					},
					{
						id: '2',
						title: '选项2'
					},
					{
						id: '3',
						title: '选项3'
					},
				],
				optionId: 0,
				optionModel: [{
						id: '1',
						title: '选项1',
						icon: 'iconfont icon-suoding',
						color: '#2a31e8;'
					},
					{
						id: '2',
						title: '选项2',
						icon: 'iconfont icon-suoding',
						color: '#2a31e8;'
					},
					{
						id: '3',
						title: '选项3',
						icon: 'iconfont icon-suoding',
						color: '#2a31e8;'
					},
				],
			}
		},
		onLoad() {

		},
		methods: {
			changeOccupation(e) {
				console.log(e);
				this.occupationId = e.id;
			},
			changeProvince(e) {
				console.log(e);
				let that = this;
				if (this.provinceId != e.id) {
					this.provinceId = e.id;
					this.areaId = 0;
					this.areaModel = e.child;
					setTimeout(function() {
						that.$refs.formSelect3.update();
					}, 50);
				}
			},
			changeArea(e) {
				console.log(e);
				this.areaId = e.id;
			},
			changeIcon(e) {
				console.log(e);
				this.iconId = e.id;
			},
			changeOption(e) {
				console.log(e);
				this.optionId = e.id;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		._main {
			padding: 0 32rpx;

			.uni__input_box {
				margin-top: 42rpx;

				.uni__input_label_text {
					display: flex;

					view {
						padding: 6rpx 6rpx 0;
					}

					._required {
						color: red;
					}
				}

				.uni__input {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border-radius: 4px;
					height: 40px;
					margin-bottom: 12px;
					background-color: #e6e6e6;
				}

				.uni__input_group {
					display: flex;
					justify-content: space-between;

					.uni__input {
						width: 48%;
					}
				}
			}
		}
	}
</style>